<template>
  <div class="data-v-loading5" :style="hostSty">
    <div class="text">
      Loading<span class="text-dot">{{ dot }}</span
      >{{ percent }}
    </div>

    <div class="box">
      <div class="bar" v-for="i in barNums" :key="i" :style="barSty(i)"></div>
    </div>
  </div>
</template>

<script>
import Circle from "./Circle";
import Color from "color-js";
export default {
  name: "data-v-loading5",
  props: ["percentage", "color"],
  computed: {
    percent() {
      return Math.round(this.percentage * 100) + "%";
    },
    hostSty() {
      return {
        "--color": this.color
      };
    }
  },

  data() {
    return {
      dot: "",
      barNums: 60
    };
  },

  methods: {
    barSty(index) {
      // if(index)
      let bg = "rgba(255, 255, 255, 0.3)";
      let pos = index / this.barNums;
      if (pos < this.percentage) {
        bg = this.color;
      }
      return {
        background: bg
      };
    }
  },

  created() {
    this.timer = setInterval(() => {
      this.dot += ".";
      if (this.dot.length > 3) {
        this.dot = "";
      }
    }, 500);
  },

  mounted() {

  },

  destroyed() {}
};
</script>

<style lang="less">
@color-gray: rgba(255, 255, 255, 0.3);

.data-v-loading5 {
  width: 312px;
  height: 50px;
  margin: 0 10px;
  display: inline-block;
  // outline: 1px solid lightpink;

  .text {
    height: 20px;
    text-align: center;
    position: relative;
    font-size: 12px;
    color: var(--color);
    .text-dot {
      display: inline-block;
      width: 25px;
      text-align: left;
    }

    &::after {
      position: absolute;
      left: 0;
      top: 50%;
      content: "";
      display: flex;
      width: 30%;
      height: 1px;
      background: @color-gray;
    }
    &::before {
      position: absolute;
      right: 0;
      top: 50%;
      content: "";
      display: flex;
      width: 30%;
      height: 1px;
      background: @color-gray;
    }
  }

  .box {
    height: 25px;
    border: 2px solid @color-gray;
    border-radius: 3px;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    .bar {
      width: 3px;
      background: var(--color);
    }
  }
}
</style>
